<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin: 0;padding: 0;list-style-type: none;text-decoration: none;}
            body{width:100%;height:100%;overflow: hidden;}
            ul{height:100%;width:7680px;position: absolute;left: 0;top: 0;}
            li{height:614px;width:960px;float:left;}
            img{width:100%;height: 100%;}
            .a{width: 1000px;height:20px;background: #ccc;position:absolute;left:50%;bottom:100px;margin-left: -500px;}
            p{width: 0;height:20px;background: #ff0;position: absolute;left: 0;bottom: 0px;}
            span{width:40px;height:20px;background: #fff;display: block;position: absolute;left:0;}
            a{width: 80px;height:100px;text-align: center;line-height: 100px;background: #000;color: #fff;font-size:18px;}
            .left{position:absolute;left:0;top:50%;margin-top: -50px;}
            .right{position:absolute;right:0;top:50%;margin-top: -50px;}
        </style>
    </head>
    <body>
        <ul>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
            <li><img src="img/8.jpg" alt=""></li>
        </ul>
        <div class="a">
            <p></p>
            <span></span>
        </div>     
        <a href="javascript:;" class="left">left</a>
        <a href="javascript:;" class="right">right</a>
        <script src="js/jquery.min.js" type="text/javascript"></script>       
        <script type="text/javascript">
            var ax = 0;
            var x = 0;
            var d_w = $(".a").outerWidth();
            var span_w = $("span").outerWidth();
            var win_w = $(window).outerWidth();
            var ul_w = $("ul").outerWidth();
            var al = $(".a").offset().left;
            var span = $("span");
            var a = $(".a");
            var left = $(".left");
            var right = $(".right");
            var p = $("p");
            var ul = $("ul");
            span.mousedown(function (ex) {
                ax = ex.pageX - al;
                $(document).mousemove(function (ex) {
                    x = ex.pageX - ax - al;
                    auto();
                });
                $(document).mouseup(function (ex) {
                    $(document).off();
                });
            });
            a.click(function (ex) {
                x = ex.pageX - ax - al;
                auto();
            });
            left.click(function (ex) {
                x -= 100;
                auto();
            });
            right.click(function (ex) {
                x += 100;
                auto();
            });
            function auto() {
                if (x < 0) {
                    x = 0;
                } else if (x > d_w - span_w) {
                    x = d_w - span_w;
                }
                span.stop().animate({"left": x}, 1000);
                p.stop().animate({"width": x}, 1000);
                ul.stop().animate({"left": -(ul_w - win_w) / (d_w - span_w) * x}, 1000);
            }

        </script>

    </body>
</html>
